<template>
  <div class="user-result-main" style="margin-top: 60px;">
    <a-divider>搜索到以下结果</a-divider>
    <SearchUserResult v-for="user in users" :key="user.id" :user="user"></SearchUserResult>
    <div style="text-align: center;">
      <div slot="empty" style="text-align: left;" v-if="total == 0">
        <el-empty :image-size="200" description="啥也找不到呀，换个关键词或筛选条件试试吧！" />
      </div>
      <!-- 底部分页器 -->
      <el-pagination background layout="total, prev, pager, next" :total="total" :current-page.sync="currentPage"
        @current-change="handlePageChange" :page-size="pageSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { loadUsers } from '@/API/search.js'
import SearchUserResult from '@/components/Search/SearchUserResult.vue'
import { Message } from 'element-ui'
export default {
  components: { SearchUserResult },
  data() {
    return {
      input: this.$route.query.keyword,
      total: 0,
      currentPage: 1,
      pageSize: 6,
      users: [
        // {
        //   id: '001',
        //   userName: '老光头青蛙',
        //   avatar:
        //     'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   description: '我是青蛙呱呱呱',
        //   tags: ['两栖动物', '变态发育'],
        // },
        // {
        //   id: '002',
        //   userName: '老光头青蛙',
        //   avatar:
        //     'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   description: '我是青蛙呱呱呱',
        //   tags: ['两栖动物', '变态发育'],
        // },
      ],
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      this.load()
    },
  },
  mounted() {
    this.total = this.users.length
  },
  beforeRouteUpdate(to, from, next) {
    next();
    loadUsers(to.query.keyword)
      .then((res) => {
        if (res.data.code === 200) {
          this.users = res.data.data
          this.total = this.users.length
        } else {
          Message({
            message: res.data.msg,
            type: 'error',
            customClass: 'message-global',
          })
        }
      })
      .catch((err) => {
        Message({
          message: err,
          type: 'error',
          customClass: 'message-global',
        })
      })
  },
  created() {
    loadUsers(this.input)
      .then((res) => {
        if (res.data.code === 200) {
          this.users = res.data.data
          this.total = this.users.length
        } else {
          Message({
            message: res.data.msg,
            type: 'error',
            customClass: 'message-global',
          })
        }
      })
      .catch((err) => {
        Message({
          message: err,
          type: 'error',
          customClass: 'message-global',
        })
      })
  },
}
</script>

<style>
.user-result-main {
  height: 100%;
  background-color: transparent;
}
</style>